<template>
	<view class="container">
		<view class="top">
			<view class="content">
				<image class="book-image" :src="images" mode="aspectFit"></image>
			</view>
			<view class="header">
				<text class="title">{{ title }}</text>
				<view class="text-1">公共课</view>
			</view>
		</view>
		<view class="exam-list">
			<block v-for="(exam, index) in exams" :key="index">
				<view class="exam-item" @click="navigateToExam(exam)">
					<view class="exam-title">{{ formatTitle(exam.title) }}</view>
					<view class="exam-details">
						<text class="exam-count">共计{{ exam.count }}道题</text>
						<view class="exam-icon">
							<image class="exam-image" src="../../static/image/记录.png" mode=""></image>
							<text class="exam-record" @click.stop="toggleRecord(exam)">记录</text>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '', // 接收传递的书本名称
				images: '', // 接收传递的图片路径
				// subject: '',
				exams: [{
						title: '2024年四川省专升本计算机基础真题（回忆版）',
						count: 59,
						record: false
					},
					{
						title: '2023年四川省专升本计算机基础真题（回忆版）',
						count: 56,
						record: false
					},
					{
						title: '2022年四川省专升本计算机基础真题（回忆版）',
						count: 57,
						record: false
					},
				]
			};
		},
		onLoad(options) {
			// 获取 URL 参数并解码
			console.log('接收到的参数:', options);
			this.title = decodeURIComponent(options.title);
			this.images = decodeURIComponent(options.images);
			// this.subject = decodeURIComponent(options.subject); // 接收科目名称

			// 动态更新 exams 数据
			this.exams = this.exams.map(exam => ({
				...exam,
				title: exam.title.replace('计算机基础', this.title || '大学英语') // 默认替换为 "大学英语"
			}));
		},
		methods: {
			navigateToExam(exam) {
				uni.navigateTo({
					url: `/pages/exam-detail/exam-detail?title=${encodeURIComponent(exam.title)}&count=${encodeURIComponent(exam.count)}`
				});
			},
			toggleRecord(exam) {
				exam.record = !exam.record;
			},
			formatTitle(title) {
				// 将 "计算机基础" 替换为 "大学英语"
				if (!title) return ''; // 防止 title 为空
				return title.replace('计算机基础', '计算机基础');
			}
		}
	};
</script>

<style scoped>
	.top {
		display: flex;
		align-items: center;
		background-color: white;
	}

	.header {
		margin-bottom: 20px;
		margin-left: 15px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
	}

	.book-image {
		width: 80px;
		height: 100px;
		border-radius: 10px;
		margin: 20px;
	}

	.text-1 {
		margin-top: 20px;
		width: 60px;
		height: 25px;
		border-radius: 5px;
		text-align: center;
		background-color: whitesmoke;
	}

	.exam-list {
		padding: 10px;
	}

	.exam-item {
		background-color: #fff;
		border-radius: 10px;
		padding: 10px;
		margin-top: 18px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.exam-title {
		font-size: 17px;
		font-weight: bold;
		margin-bottom: 20px;
	}

	.exam-details {
		width: 100%;
		display: flex;
	}

	.exam-count {
		color: #666;
	}

	.exam-icon {
		margin-left: 50px;
		display: flex;
		align-items: center;
	}

	.exam-image {
		width: 18px;
		height: 18px;
	}

	.exam-record {
		color: #999;
		cursor: pointer;
		margin-left: 5px;
	}
</style>